<script setup lang="ts">
import { PropType } from "./type";
import { restrictNum } from "./utils";
import AnimateNumber from "@/components/common/AnimateNumber.vue";
const percentage = defineModel({
  type: Number,
  required: true,
  default: 0,
});

const DEFAULT_COLOR = "#5CACFF";
const props = withDefaults(defineProps<PropType>(), {
  color: DEFAULT_COLOR,
  time: 0.6,
  textinside: false,
});

const progressValue = computed(() => restrictNum(percentage.value) + "%");
const timeValue = computed(() => props.time + "s");
const color = computed(() => {
  if (Array.isArray(props?.color)) {
    let _color = DEFAULT_COLOR;
    for (const item of props?.color) {
      if (percentage.value >= item.percentage) {
        _color = item.color;
      }
    }
    return _color;
  }
  return props.color;
});
</script>

<template>
  <div class="progress">
    <div class="progress-value" v-if="props.textinside">
      <AnimateNumber :num-value="restrictNum(percentage)">%</AnimateNumber>
    </div>
  </div>
</template>

<style scoped lang="scss">
.progress {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  position: relative;
  background-color: rgb(235, 238, 245);
  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: v-bind(progressValue);
    border-radius: inherit;
    height: 100%;
    background: v-bind(color);
    transition: all v-bind(timeValue) ease;
  }

  .progress-value {
    position: absolute;
    left: v-bind(progressValue);
    top: 50%;
    transform: translate(-120%, -50%);
    font-size: 14px;
    transition: all v-bind(timeValue) ease;
    z-index: 10;
    color: #fff;
  }
}
</style>
